<template>
  <!-- 
    :value="selectValue.name"  存在问题。将来这个组件在其他地方使用时，管理的数据可能没有name属性，可能是其他属性
    defaultProps.label 就是 tree 组件要渲染的内容
    选中 tree 的内容就是 select 要展示的内容 ->  :value="selectValue[defaultProps.label]"
  -->
  <el-select
    popper-class="tree-select"
    :value="selectValue[defaultProps.label]"
    ref="selectRef"
  >
    <el-option value="">
      <!-- 
        data 要渲染数据
       -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        @node-click="handleNodeClick"
        highlight-current
        :expand-on-click-node="false"
      ></el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "GGTreeSelect",
  props: {
    value: {
      type: [String, Number, Object], // 类型可以使用 String, Number, Object 其中一个
      required: true,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    defaultProps: {
      type: Object,
      default: () => ({
        children: "children",
        label: "label",
      }),
    },
  },
  data() {
    return {
      selectValue: this.value,
    };
  },
  methods: {
    handleNodeClick(data) {
      this.selectValue = data;
      this.$refs.selectRef.blur();
      this.$emit("input", data);
    },
  },
};
</script>

<style lang="scss">
// 加上 scoped 样式会进行 tree-shaking。自动删除没有使用的样式
.tree-select .el-select-dropdown__item {
  height: auto !important;
  background-color: #fff !important;
  padding: 0 !important;
  font-weight: normal !important;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #fff;
  color: #409eff;
  font-weight: 700;
}
</style>
